<template>
  <div class="bg-white rounded-xl p-6 shadow-md card-hover">
    <div class="flex justify-between items-center mb-4">
      <h3 class="font-bold text-lg text-gray-800">完成包裹</h3>
      <div class="text-sm text-gray-500">
        {{ currentPage }}/{{ totalPages }} 页
      </div>
    </div>
    <div class="space-y-3">
      <!-- 使用单个v-for循环，内部用v-if/v-else区分 -->
      <div v-for="(parcel, index) in displayedParcels" :key="index">
        <!-- 有数据时显示正常卡片 -->
        <div v-if="parcel.trackingNumber"
             class="p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
          <div class="flex justify-between items-start">
            <div>
              <p class="font-medium text-gray-800">{{ parcel.trackingNumber }}</p>
              <p class="text-sm text-gray-500 mt-1">{{ parcel.description }}</p>
              <p class="text-xs text-gray-400 mt-1">{{ parcel.completedTime }}</p>
            </div>
            <!-- 新增：查看详情按钮 -->
            <button @click.stop="showParcelDetail(parcel)"
                    class="px-3 py-1 text-sm text-blue-500 hover:bg-blue-50 rounded transition-colors ml-2">
              详情
            </button>
          </div>
        </div>

        <!-- 无数据时显示占位卡片 -->
        <div v-else
             class="p-3 bg-gray-50 rounded-lg border border-dashed border-gray-200">
          <div class="flex justify-center items-center h-16">
            <p class="text-sm text-gray-400">暂无包裹记录</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页控制 -->
    <div class="flex justify-between items-center mt-4 pt-3 border-t border-gray-100">
      <button @click="prevPage"
              :disabled="currentPage === 1"
              :class="[
                'px-2 py-1 rounded text-sm',
                currentPage === 1
                  ? 'text-gray-400 cursor-not-allowed'
                  : 'text-accent4 hover:bg-accent1/20'
              ]">
        <i class="fas fa-chevron-left mr-1"></i>
        上一页
      </button>
      <button @click="nextPage"
              :disabled="currentPage === totalPages"
              :class="[
                'px-2 py-1 rounded text-sm',
                currentPage === totalPages
                  ? 'text-gray-400 cursor-not-allowed'
                  : 'text-accent4 hover:bg-accent1/20'
              ]">
        下一页
        <i class="fas fa-chevron-right ml-1"></i>
      </button>
    </div>

    <!-- 新增：包裹详情模态框 -->
    <div v-if="showDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
      <div class="bg-white rounded-xl shadow-lg w-full max-w-2xl mx-4">
        <div class="p-6">
          <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold">包裹详情</h3>
            <button @click="showDetailModal = false" class="text-gray-500 hover:text-gray-700">
              <i class="fas fa-times"></i>
            </button>
          </div>
          <ParcelDetail :parcel="currentParcel" />
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { myCompletedParcels } from "@/mock/myCompletedParcels.js";
import ParcelDetail from "@/components/ParcelDetail.vue";

export default {
  name: "CompletedParcels",
  components: { ParcelDetail,myCompletedParcels },
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 3,
      // 内部模拟数据
      mockData: myCompletedParcels,
      // 新增：模态框状态和当前包裹数据
      showDetailModal: false,
      currentParcel: null
    };
  },
  computed: {
    // 计算总页数
    totalPages() {
      return Math.ceil(this.mockData.length / this.itemsPerPage);
    },
    // 获取当前页的数据并严格限制为两条
    displayedParcels() {
      // 确保 currentPage 不超出有效范围
      const maxPage = Math.ceil(this.mockData.length / this.itemsPerPage);
      if (this.currentPage > maxPage) {
        this.currentPage = maxPage;
      }

      // 计算当前页的数据范围
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = Math.min(start + this.itemsPerPage, this.mockData.length);

      // 获取当前页数据
      const pageData = this.mockData.slice(start, end);

      // 确保返回的数组长度为 itemsPerPage（2条）
      const result = new Array(this.itemsPerPage).fill({});
      pageData.forEach((item, index) => {
        if (index < this.itemsPerPage) {
          result[index] = item;
        }
      });

      return result;
    }
  },
  methods: {
    // 上一页
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    // 下一页
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    // 显示包裹详情方法
    showParcelDetail(parcel) {
      this.currentParcel = parcel;
      this.showDetailModal = true;
    }
  }
};
</script>